<!DOCTYPE html>
<html lang="en">
<head>

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <span onmouseover="pingGuo()">苹果</span>
    <span onmouseover="liZi()">梨子</span>
    <span  onmouseover="xiangJiao()">香蕉</span>
</div>
<hr>
<img src="1.jpg" id="pic" width="300px" onmouseover="pic()"/>
<script>
    var i=0;
function pingGuo() {
    pic.src="1.jpg";
}
function liZi() {
    pic.src="2.jpg";
}
function xiangJiao() {
    pic.src="3.jpg";
}


</script>
</body>
</html>